<div id="contenedor" class="container"> 
    <div class="row-fluid">
        <div class="row-fluid">
            <ul  class="span12 breadcrumb alingCenter">
                <li><b><?php echo $cantidadClientes ?> clientes encontrados</b></li>
            </ul>
        </div>
    </div>
    <div id="buscarClientes"  class="row-fluid">
        <div id="criteriosInput" class="span10">
            <input id="page" type="text" name="page" class="hide" value="<?php echo $paginaActiva ?>">
            <div class="row-fluid">
                <div class="span3">
                    <input type="text" id="identificacion" name="identificacion" class="criterio input-block-level" placeholder="Identificación" id="sIdentificacion" value="<?php if (!empty($_GET['identificacion'])) echo $_GET['identificacion']; ?>">
                </div>
                <div class="span3">
                    <input type="text" id="nombre" name="nombre" class="criterio input-block-level" placeholder="Nombre" id="sNombre" value="<?php if (!empty($_GET['nombre'])) echo $_GET['nombre']; ?>">
                </div>
                <div class="span3">
                    <input type="text" id="apellido" name="apellido" class="criterio input-block-level" placeholder="Primer apellido" id="sApellido" value="<?php if (!empty($_GET['apellido'])) echo $_GET['apellido']; ?>">
                </div>
                <div class="span3">
                    <select id="nacionalidad" name="nacionalidad" class="criterio input-block-level">
                        <option value="">Nacionalidad...</option>

                        <?php
                        $seleccionPais = "";
                        if (!empty($_GET['nacionalidad']))
                            $seleccionPais = $_GET['nacionalidad'];
                        foreach ($paises as $pais) {
                            ?>
                            <option value="<?php echo $pais->id_pais; ?>" <?php if ($seleccionPais == $pais->id_pais) echo "selected"; ?>><?php echo $pais->nombre ?></option>
                        <?php } ?> 
                    </select>
                </div>
            </div>
        </div>
        <div class="span2">
            <div class="row-fluid">
                <div class="span4">
                    <button title="Buscar" id="botonBuscarClientes" type="submit" class="btn btn-inverse pull-right"><i class="icon-search icon-white"></i></button>
                </div>
                <div class="span4">
                    <a  title="Limpiar formulario" href="clientes" class="btn btn-primary pull-right"><i class="icon-refresh icon-white"></i></a>
                </div>
                <div class="span4">
                    <button id="crearCliente" title="Crear cliente"  class="btn btn-primary pull-right"><i class="icon-plus icon-white"></i></button>
                </div>
            </div>
        </div>

    </div>
    <div class="row-fluid">
        <table id="tablaClientes" class="table table-hover">
            <thead>
                <tr>
                    <th>Nombres</th>
                    <th>Apellidos</th>
                    <th>Identificación</th>   
                    <th>Teléfono</th>
                    <th>Email</th>
                    <th>Nacionalidad</th>
                    <th>Opciones</th>
                </tr>
            </thead>
            <tbody>
                <?php
                foreach ($clientes as $cliente) {
                    ?>

                    <tr>
                        <td><?php
                            echo $cliente->nombre;
                            if ($cliente->id_tipo_cliente == 2)
                                echo " <b>(Empresa)</b>";
                            ?></td>
                        <td><?php echo $cliente->primer_apellido . " " . $cliente->segundo_apellido ?></td>
                        <td><?php echo $cliente->identificacion; ?></td>
                        <td><?php echo $cliente->telefono; ?></td>
                        <td><?php echo $cliente->email; ?></td>
                        <td><?php echo $cliente->nombrePais; ?></td>
                        <td class="anchoCeldaOpciones"> <button class="btn btn-mini btn-primary ver"
                                                                data-idcliente="<?php echo $cliente->id_cliente; ?>"
                                                                data-tipocliente="<?php echo $cliente->id_tipo_cliente; ?>"
                                                                data-idpais="<?php echo $cliente->id_pais; ?>"
                                                                data-identificacion="<?php echo $cliente->identificacion; ?>"
                                                                data-iddocumento="<?php echo $cliente->id_documento; ?>"
                                                                data-fechanacimiento="<?php echo $cliente->fecha_nacimiento; ?>"
                                                                data-nombre="<?php echo $cliente->nombre; ?>"
                                                                data-primerapellido="<?php echo $cliente->primer_apellido; ?>"
                                                                data-segundoapellido="<?php echo $cliente->segundo_apellido; ?>"
                                                                data-genero="<?php echo $cliente->genero; ?>"
                                                                data-telefono="<?php echo $cliente->telefono; ?>"
                                                                data-email="<?php echo $cliente->email; ?>"
                                                                data-ocupacion="<?php echo $cliente->ocupacion; ?>"
                                                                data-direccion="<?php echo $cliente->direccion; ?>"
                                                                data-nota="<?php echo $cliente->nota; ?>"
                                                                type="button">Ver / Editar</button> 
                            <button class="btn btn-mini btn-primary historial" type="button" data-idcliente="<?php echo $cliente->id_cliente; ?>">Historial</button>
                            <button title="Eliminar este cliente" class="btn btn-mini btn-danger eliminar" type="button" data-idcliente="<?php echo $cliente->id_cliente; ?>"
                                    data-nombre="<?php echo $cliente->nombre; ?>"
                                    data-primerapellido="<?php echo $cliente->primer_apellido; ?>"
                                    data-segundoapellido="<?php echo $cliente->segundo_apellido; ?>"
                                    >x</button></td>
                    </tr>
                <?php } ?>
            </tbody>
        </table>
        <div class="row-fluid">
            <div id="paginacion" class="pagination pull-right"
                 data-identificacion="<?php if (!empty($_GET["identificacion"])) echo $_GET["identificacion"]; ?>"
                 data-nombre="<?php if (!empty($_GET["nombre"])) echo $_GET["nombre"]; ?>"
                 data-apellido="<?php if (!empty($_GET["apellido"])) echo $_GET["apellido"]; ?>"
                 data-nacionalidad="<?php if (!empty($_GET["nacionalidad"])) echo $_GET["nacionalidad"]; ?>"
                 >
                <ul>
                    <li class="<?php
                    if ($paginaActiva == 1)
                        echo "active";
                    else
                        echo "noActive";
                    ?>"><a data-page="1">1</a></li>
                        <?php for ($i = 2; $i <= $cantidadPaginas; $i++) { ?>
                        <li class="<?php
                        if ($paginaActiva == $i)
                            echo "active";
                        else
                            echo "noActive";
                        ?>"><a data-page="<?php echo $i; ?>"><?php echo $i; ?></a></li>
                        <?php } ?>
                </ul>
            </div> 
        </div>
    </div>
    <div class="row-fluid"></div>
</div>

<!-- Modal historial -->
<div id="modalHistorial" class="modal hide fade ancho2Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Historial de hospedajes del cliente</h3>
    </div>
    <div id="bodyHistorial" class="modal-body">

    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
    </div>

</div>

<!-- Modal crear/actualizar cliente -->
<form id="modalCrearCliente" action="clientes/crearCliente" method="post" class="modal hide fade ancho2Modal formBlockDisplay" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="nombreModal">Crear cliente</h3>
    </div>
    <div class="modal-body">
        <div id="botonesQuienPaga" class="row-fluid"> 
            <div class="span4">

            </div>
            <div class="span4 alingCenter">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button id="buttonDatosPersona" type="button" class="btn btn-inverse active">Persona</button>
                    <button id="buttonDatosEmpresa" type="button" class="btn btn-inverse">Empresa</button>
                </div>
                <br><br>
            </div>

        </div>
        <div id="formQuienPaga">
            <input id="quien" name="quien" value="persona" readonly="readonly" type="text" class="hide">
            <input id="idCliente" name="idCliente"  readonly="readonly" type="text" class="hide">
            <div id="datosPersona">
                <div class="row-fluid">
                    <div class="span3">
                        <span>Nacionalidad:</span><span id="divSolicitarVisa" class="pull-right colorRed hide">Se le exige visa</span>
                        <select id="nacionalidadCliente" name="nacionalidadCliente">
                            <option value="">Seleccionar...</option>
                            <?php foreach ($paises as $row) { ?>
                                <option value="<?= $row->id_pais ?>" data-visa="<?= $row->visa_colombia ?>"><?= $row->nombre ?></option>
                            <?php } ?>
                        </select>
                    </div> 
                    <div class="span3">
                        <span>Documento:</span>
                        <input id="identificacionCliente" name="identificacionCliente"  type="text">
                    </div> 
                    <div class="span3">
                        <span>Tipo de documento:</span>
                        <select id="tipoDocumento" name="tipoDocumento" class="">
                            <option value="">Seleccionar...</option>
                            <?php foreach ($documentos as $row) { ?>
                                <option value="<?php echo $row->id_documento; ?>"><?php echo $row->nombre; ?></option>
                            <?php } ?>
                        </select> 
                    </div> 
                    <div class="span3">
                        <span>Fecha de nacimiento:</span>
                        <input id="fechaNacimiento" name="fechaNacimiento" type="text" class="" placeholder="dd/mm/yyyy">
                        <span id="ayudaFechaNacimiento" class="colorRed hide" style="display: none;">Formato de fecha inválido</span>
                    </div> 

                </div>
                <div class="row-fluid">
                    <div class="span3">
                        <span>Nombre:</span>
                        <input id="nombreCliente" name="nombreCliente" class="requeridoPersona" type="text">
                    </div> 
                    <div class="span3">
                        <span>Primer apellido:</span>
                        <input id="primerApellido" name="primerApellido" type="text">
                    </div> 
                    <div class="span3">
                        <span>Segundo apellido:</span>
                        <input id="segundoApellido" name="segundoApellido" type="text">
                    </div> 
                    <div class="span3">
                        <span>Género:</span>
                        <select id="genero" name="genero" class="">
                            <option value="">Seleccionar...</option>
                            <option value="Masculino">Masculino</option>
                            <option value="Femenino">Femenino</option>         
                        </select>
                    </div> 
                </div>
                <div class="row-fluid">
                    <div class="span3">
                        <span>Teléfono:</span>
                        <input id="telefono" name="telefono" class="" type="text">
                    </div> 
                    <div class="span3">
                        <span>E-mail:</span>
                        <input id="email" name="email" type="text">
                    </div> 
                    <div class="span3">
                        <span>Ocupación:</span>
                        <input id="ocupacion" name="ocupacion" type="text">
                    </div> 
                    <div class="span3">
                        <span>Dirección:</span>
                        <input id="direccion" name="direccion" type="text">
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <span >Notas:</span><br>
                        <textarea id="nota" name="nota" class="span12"> </textarea>
                    </div>
                </div>
            </div>
            <div id="datosEmpresa" class="hide">
                <div class="row-fluid">
                    <div class="span3">
                        <span>País:</span>
                        <select id="paisEmpresa" name="paisEmpresa" class="input-block-level">
                            <option value="">Nacionalidad...</option>
                            <?php foreach ($paises as $pais) { ?>
                                <option value="<?php echo $pais->id_pais; ?>"><?php echo $pais->nombre ?></option>
                            <?php } ?> 
                        </select>
                    </div> 
                    <div class="span3">
                        <span>Identificación:</span>
                        <input id="identificacionEmpresa" name="identificacionEmpresa" class="requeridoEmpresa preservar" type="text">
                    </div> 
                    <div class="span3">
                        <span>Nombre:</span>

                        <input id="nombreEmpresa" name="nombreEmpresa" class="requeridoEmpresa" type="text">
                    </div> 
                    <div class="span3">
                        <span>Teléfono:</span>

                        <input id="telefonoEmpresa" name="telefonoEmpresa" class="requeridoEmpresa" type="text">
                    </div> 
                </div>
                <div class="row-fluid">
                    <div class="span3">
                        <span>Dirección:</span>

                        <input id="direccionEmpresa" name="direccionEmpresa" class="requeridoEmpresa" type="text">
                    </div> 
                    <div class="span3">
                        <span>E-mail:</span>

                        <input id="emailEmpresa" name="emailEmpresa" class="" type="text">
                    </div> 
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
        <button id="botonCliente" class="btn btn-primary">Crear</button>
    </div>
</form>

<!-- Modal eliminar Cliente-->
<form id="modalEliminarCliente" action="clientes/eliminarCliente"method="post" class="modal hide fade formBlockDisplay" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h4>Eliminar cliente</h4>
    </div>
    <div class="modal-body">
        <p>¿Realmente desea eliminar el cliente <em class="text-info" id="nombreDelCliente"></em>?</p>
        <br>
        <p><b>Advertencia:</b> También se eliminarán todas las reservas registradas a su nombre.</p>
        <input id="idClienteEliminar" name="idCliente"  type="text" class="hide">
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Cancelar</button>
        <button id="enviarFormEliminarReserva" class="btn btn-primary preservar">Eliminar</button>
    </div>
</form>
